<template>
    <my-dialog v-model="dialogVisible" width="680px" title="确认支付" @close="dialogClose">
        <div class="pay-body">
            <div class="row price" v-if="money">
                <span class="">
                    实际支付: <div class="money">{{`￥${money * num}`}}元</div> 
                </span>
                <span>请使用微信或支付宝支付</span>
            </div>

            <div class="row qrcode pay-type">
                <div class="code-item wechat">
                    <div class="code">
                        <i v-if="!wxpaySrc" class="el-icon-loading"></i>
                        <img v-if="wxpaySrc" :src="wxpaySrc" alt="微信支付二维码"/>
                    </div>

                    <div class="code-name">
                        <img class="icon" src="@images/icon/icon-wxpay.png" alt="微信支付">
                        微信支付
                    </div>
                </div>

                <div class="code-item alipay">
                    <div class="code">
                        <i v-if="!alipaySrc" class="el-icon-loading"></i>
                        <img v-if="alipaySrc" :src="alipaySrc" alt="阿里支付二维码"/>
                    </div>

                    <div class="code-name">
                        <img class="icon" src="@images/icon/icon-alipay.png" alt="支付宝支付">
                        支付宝支付
                    </div>
                </div>
            </div>

                    <!-- *********************************************** -->       

            <!-- <div class="row clause">
                支付即同意《会员服务和兑换码使用协议》
            </div> -->
        </div>
    </my-dialog>
</template>

<script>
import QRCode from 'qrcode';

export default {
    data() {
        return {
            dialogVisible: false,

            money: 0,
            num: 1,
            ordercode: '',

            wxpaySrc: '',
            alipaySrc: '',

            pollingLock: false,

            pollingTimer: null,
            
            activeName: 'qrcode',
        };
    },
    watch: {
        dialogVisible(val) {
            this.pollingLock = !val;

            if (!val) {
                try {
                    clearTimeout(this.pollingTimer);
                } catch(e) {
                    // e
                }

                this.wxpaySrc = this.alipaySrc = '';
            }
        },
    },
    methods: {
        // 创建订单
        initHandler(data) {
            this.dialogVisible = true;

            this.money = data.realamount;
            this.num = data.productnum;

            this.$post(`${this.$store.state.api.sysUrl}/pay/allinpay/createorderandpay.json`, data, data => {
                QRCode.toDataURL(data.wxpayinfo, (err, src) => {
                    if (err) {
                        console.error(err);
                    }

                    src && (this.wxpaySrc = src);
                });

                QRCode.toDataURL(data.zfbpayinfo, (err, src) => {
                    if (err) {
                        console.error(err);
                    }
                    
                    src && (this.alipaySrc = src);
                });

                this.ordercode = data.fictitiousid;

                this.pollingHandler();
            });
        },
        // 重新支付
        rePayHandler(data) {
            this.dialogVisible = true;

            this.money = data.payamount;

            this.$post(`${this.$store.state.api.sysUrl}/pay/allinpay/topay.json`, data, data => {
                QRCode.toDataURL(data.wxpayinfo, (err, src) => {
                    src && (this.wxpaySrc = src);
                });

                QRCode.toDataURL(data.zfbpayinfo, (err, src) => {
                    src && (this.alipaySrc = src);
                });

                this.ordercode = data.fictitiousid;

                this.pollingHandler();
            });
        },
        // 轮询查结果
        pollingHandler() {
            function polling(cb) {
                this.$get(`${this.$store.state.api.sysUrl}/pay/allinpay/paystatus.json`, {
                    ordercode: this.ordercode,
                }, data => {
                    // 0待支付，1支付成功，2支付失败，3订单失效，4验签失败
                    if (this.pollingLock) return;

                    if (data === '200') {
                        showMsgBox('支付成功', 'success');

                        this.$emit('success');
                        
                        this.dialogClose();
                    } else {
                        this.pollingTimer = setTimeout(() => {
                            polling.call(this);
                        }, 3000);
                    }
                });
            };

            polling.call(this, polling);
        },
        // 关闭弹窗
        dialogClose() {
            this.checkPayStatus(this.ordercode);
            this.dialogVisible = false;
        },
        
        // 支付弹窗 关闭时查询 订单状态
        checkPayStatus(val){
            if(!val){
                return;
            }

            function polling(cb) {
                this.$get(`${this.$store.state.api.sysUrl}/pay/allinpay/paystatus.json`, {
                    ordercode: val,
                }, data => {
                    if (data !== '200') {
                        this.$emit('closeNoPay')
                    } 
                });
            };

            setTimeout(() => {
                polling.call(this);// polling.call(this, polling);
            }, 3000);
        },
    },
};
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';

    .pay-body {
        margin-top: -30px;

        .row{
            text-align: center;

            & + .row{
                // margin-top: 45px;
            }

            &.pay-type {
                padding: 25px 0;
            }

            &.price{
                font-size: 16px;
                font-weight: bold;
                text-align: center;

                span {
                    display: flex;
                    margin-top: 5px;
                    justify-content: center;
                }
                

                .money{
                    color: red;
                    
                }
            }

            &.qrcode{
                overflow: hidden;
                width: 500px;
                margin-left: auto;
                margin-right: auto;

                .code-item{
                    width: 50%;
                    float: left;

                    &.wechat{
                        .code {
                            border: 1px solid #61bd32;
                        }
                    }

                    &.alipay{
                        .code {
                            border: 1px solid #22b5f0;
                        }
                    }

                    .code{
                        width: 138px;
                        height: 138px;
                        border-radius: 6px;
                        margin: 0 auto;
                        overflow: hidden;

                        img{
                            width: 100%;
                            height: 100%;
                        }

                        .el-icon-loading {
                            line-height: 138px;
                            font-size: 20px;
                        }
                    }

                    .code-name{
                        line-height: 1em;
                        margin-top: 15px;

                        .icon{
                            vertical-align: middle;
                        }
                    }
                }
            }

            &.clause{
                text-align: left;
                // margin-bottom: -10px;
                margin-bottom: 20px;
            }
        }

        .transfer{
            .top-tip{
                margin-top: -20px;
                margin-bottom: 30px;
                text-align: left;

                .tel{
                    color: $primaryColor;
                }
            }

            .trans-info{
                font-size: 16px;

                .info-row{
                    & + .info-row{
                        margin-top: 6px;
                    }

                    .label{
                        width: 200px;
                        margin-right: -200px;
                        float: left;
                        text-align: left;
                    }

                    .value{
                        margin-left: 200px;
                        text-align: left;
                        color: #888;
                    }
                }
            }

            .tip{
                text-align: left;
                margin-top: 35px;
            }
        }

        // ::v-deep{
        //     .el-tabs__nav-wrap::after{
        //         left: -40px;
        //         right: -40px;
        //         width: calc(100% + 80px);
        //     }
        // }
    }
</style>